// 瀑布流网格组件
// 用于展示图片或卡片的瀑布流布局，类似Pinterest的布局效果
import React from 'react';
import './MasonryGrid.css';

// 瀑布流项目类型定义
type MasonryItem = { 
  id: string | number; // 项目唯一标识
  img: string; // 图片URL
  title?: string // 可选的标题
};

// 瀑布流组件属性接口
interface MasonryGridProps {
  items: MasonryItem[]; // 要展示的项目数组
  columns?: number; // 每行显示的列数，默认6列
  cardHeight?: number; // 每个卡片的高度，默认340px
}

export default function MasonryGrid({ items, columns = 6, cardHeight = 340 }: MasonryGridProps) {
  // 网格容器样式：使用flexbox实现响应式布局
  const gridStyle: React.CSSProperties = {
    display: 'flex', // 使用flex布局
    flexWrap: 'wrap', // 允许换行
    gap: 24, // 卡片之间的间距
    width: '100%', // 占满容器宽度
    marginTop: 24, // 顶部边距
    marginLeft: 10, // 左侧边距
  };

  // 卡片样式：统一的卡片外观
  const cardStyle: React.CSSProperties = {
    background: '#fff', // 白色背景
    borderRadius: 16, // 圆角
    boxShadow: '0 2px 8px rgba(0,0,0,0.06)', // 阴影效果
    overflow: 'hidden', // 隐藏溢出内容
    display: 'flex', // 使用flex布局
    flexDirection: 'column', // 垂直排列
    // 动态计算卡片宽度：总宽度减去间距后平均分配
    width: `calc((100% - ${(columns - 1) * 24}px) / ${columns})`,
    height: cardHeight, // 固定高度
    marginBottom: 0, // 底部边距为0
  };

  // 图片样式：确保图片正确显示
  const imgStyle: React.CSSProperties = {
    width: '100%', // 占满卡片宽度
    height: cardHeight, // 固定高度
    objectFit: 'cover', // 保持比例裁剪
    display: 'block', // 块级显示
    borderRadius: '16px 16px 0 0', // 顶部圆角
  };

  return (
    <div className="masonry-grid" style={gridStyle}>
      {/* 遍历所有项目，渲染卡片 */}
      {items.map(item => (
        <div className="masonry-card" style={cardStyle} key={item.id}>
          {/* 图片：使用懒加载优化性能 */}
          <img 
            src={item.img} 
            alt={item.title} 
            className="masonry-img" 
            style={imgStyle} 
            loading="lazy" // 懒加载
          />
          {/* 可选的标题显示 */}
          {item.title && <div className="masonry-title">{item.title}</div>}
        </div>
      ))}
    </div>
  );
} 